<template>
  <div class="home">
    <div class="background">
      <div class="top">
        <div class="top_bk">
          <router-link :to="{name:'home'}" class="router_link">
            <div class="home_icon">
              <img src="../../assets/img/icon/mine/top_home.png" class='top_img'>
            </div>
          </router-link>
          <div class="head_icon">
            <img v-if="mineInfo.avatarUrl" :src="mineInfo.avatarUrl" class='head_icon_img'>
            <img v-else src="../../assets/img/bgpic/default_p.png" class='head_icon_img'>
          </div>
          <div class="pn_info">
            <div class="pn_info_fst">

              <div class="pnInfoWarp">
                <span v-if="showName">
                  {{mineInfo.nickName}}
                </span>
                <span v-else>昵称未填写</span>

                <div class="personal_info">
                  <router-link tag="div" :to="{name:'personalMaterial'}" class="router_link_ps">
                    <img src="../../assets/img/icon/mine/ps_info.png"/>
                  </router-link>
                </div>
              </div>

            </div>
            <div class="pn_info_sec">{{mineInfo.phone}}</div>
          </div>
        </div>
      </div>
      <div class="list_con">
        <ol class="item">
          <router-link :to="{name:'order'}" class="router_link">
            <li>
              <div class="item_left">
                <div class="item_left_icon">
                  <img src="../../assets/img/icon/mine/myorder.png">
                </div>
                <div class="item_left_txt">
                  我的订单
                </div>
              </div>
              <div class="item_right">
                <div class="item_right_img">
                  <img src="../../assets/img/icon/mine/more.png">
                </div>
              </div>
            </li>
          </router-link>
          <router-link :to="{name:'enrollRecord'}" class="router_link">
            <li>
              <div class="item_left">
                <div class="item_left_icon">
                  <img src="../../assets/img/icon/mine/record.png">
                </div>
                <div class="item_left_txt">
                  报名记录
                </div>
              </div>
              <div class="item_right">
                <div class="item_right_img">
                  <img src="../../assets/img/icon/mine/more.png">
                </div>
              </div>
            </li>
          </router-link>
        </ol>
      </div>
      <div class="bottom">
        <div :class="{hover:isActive}" @click="loginOut">退出登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import InfiniteLoading from "vue-infinite-loading";
import api from "@/api/index";
import { Toast, MessageBox } from "mint-ui";
import axios from "axios";
export default {
  name: "mine",
  components: {
    InfiniteLoading
  },
  created() {
    this.getMineInfo();
  },
  data() {
    return {
      showName: true,
        isActive:false,
      mineInfo: {
        avatarUrl: ""
      },
      token: localStorage.getItem("Token")
    };
  },
  methods: {
    getMineInfo() {
      let param = {
        token: this.token
      };
      api.getUserNickAndAvatar(param).then(res => {
        if (res.msgCode == "000") {
          this.mineInfo = Object.assign(this.mineInfo, res.data);
          if (this.mineInfo.phone) {
            this.mineInfo.phone =
              this.mineInfo.phone.slice(0, 3) +
              "****" +
              this.mineInfo.phone.slice(7, 11);
          }
          if (!this.mineInfo.nickName) {
            this.showName = false;
          } else {
            if(this.mineInfo.nickName.length>8){
                this.mineInfo.nickName=this.mineInfo.nickName.slice(0, 7)+'...'
            }
            this.showName = true;
          }
        } else {
          Toast({
            message: "网络错误",
            position: "middle",
            duration: 5000
          });
        }
      });
    },
    loginOut() {
        this.isActive = true;
      MessageBox.confirm("", {
        message: "确定退出登录?",
        title: "提示",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        confirmButtonClass:"minecfm_extra_class",
        cancelButtonClass:"minecancl_extra_class"
      })
        .then(action => {
            this.isActive = false;
          if (action == "confirm") {
            //确认的回调
            if (localStorage.getItem("Token")) {
              localStorage.removeItem("Token");
              this.$router.push({ path: "/login" });
            } else {
              Toast({
                message: "token已失效,退出失败！",
                position: "middle",
                duration: 5000
              });
            }
          }
        })
        .catch(err => {
          if (err == "cancel") {
            //取消的回调
            console.log(2);
              this.isActive = false;
          }
        });
    }
  }
};
</script>
<style scoped>
.background {
  min-height: 100vh;
  background-color: #ffffff;
  width: 100%;
}
.top {
  height: 212.5px;
  background-color: #ffffff;
}
.top_bk {
  height: 173px;
  width: 100%;
  background: url("../../assets/img/bgpic/ps_bk.png") no-repeat;
  background-size: contain;
  position: relative;
}
.home_icon {
  height: 34px;
  width: 34px;
  position: absolute;
  right: 10px;
  top: 16px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.top_img {
  height: 18px;
  width: 18px;
  vertical-align: middle;
}
.head_icon_img {
  vertical-align: middle;
  height: 66px;
  width: 66px;
  border-radius: 50%;
  box-sizing: border-box;
  /* border: 2px solid white; */

}
.head_icon {
  height: 70px;
  width: 70px;
  position: absolute;
  left: 50%;
  top: 60px;
  padding: 3px;
  box-sizing: border-box;
  background: #fff;
  margin: 0 0 0 -35px;
  /* background-color: #f7f7f9; */
  border-radius: 50%;
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
  	box-shadow: 2px 10px 10px 0px 
		rgba(92, 28, 38, 0.05);
}
.pn_info {
  width: 100%;
  position: absolute;
  left: 50%;
  margin: 0 0 0 -50%;
  top: 146px;
  height: 52.5px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.pn_info_fst {
  height: 50%;
  width: 100%;
  font-size: 17px;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pnInfoWarp{
    position: relative;
}

.pn_info_sec {
  height: 50%;
  width: 100%;
  font-size: 13px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.personal_info {
  position: absolute;
  padding: 0px 6px ;
  top:50%;
  right:-5px;
  height: 16px;
  transform: translate(100%,-50%);
  /*background-color: #f73657;*/
  display: flex;
  align-items: center;
  border-radius: 8px;
  height: 16px;
  width: 62px;
}
.personal_info_txt {
  font-size: 10px;
  white-space: nowrap;
  color: #ffffff;
  line-height: 1;
  vertical-align: middle;
}
.personal_info_img {
  width: 5px;
  /* height: 8.5px; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 2px;

}
.personal_info_img_con {
  width: 5px;
  vertical-align: top;
  /* height: 8.5px; */
}
.list_con{
    padding-left: 16px;
}
.item {
  display: flex;
  flex-wrap: wrap;
}
.item li {
  width: 100%;
 height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
  box-sizing: border-box;
}
.item_left {
  /* margin-left: 12.5px; */
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.item_left_icon {
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item_left_icon img {
  vertical-align: middle;
}
.item_left_txt {
  width: 60.5px;
  margin-left: 10.5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item_left_txt div {
  vertical-align: middle;
  font-size: 15px;
}
.item_right {
  margin-right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item_right_img {
  height: 12px;
  
}
.item_right_img img {
  vertical-align: middle;
  height: 100%;
}
.bottom {
  position: fixed;
  width: 100%;
  height: 45px;
  bottom: 20px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom div.hover{
  background-color: #f73657;
  color:#ffffff ;
}
.bottom div {
  height: 100%;
  text-align: center;
  color: #f73657;
  width: 100%;
  margin-right: 16px;
  margin-left: 16px;
  font-size: 16px;
  /*background-color: #f73657;*/
  box-sizing: border-box;
  border: 1px solid #f73657;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 2px;
}
.router_link {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.router_link_ps img{
  height: 16px;
  width: 62px;
}
</style>
<style>
.minecfm_extra_class {
  color: #f73657;
  width: 50%;
  font-size: 15px;
}
.minecancl_extra_class{
  font-size: 15px;
}
.background .mint-msgbox-btns{
  height: 45px;
}
</style>